<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
<meta name="theme-color" content="#222">
<meta name="generator" content="Hexo 5.0.0">
  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
  <link rel="mask-icon" href="/images/logo.svg" color="#222">
  <meta name="baidu-site-verification" content="G1hRwH33Kv">

<link rel="stylesheet" href="/css/main.css">



<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@5.14.0/css/all.min.css">
  <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/animate.css@3.1.1/animate.min.css">

<script class="hexo-configurations">
    var NexT = window.NexT || {};
    var CONFIG = {"hostname":"dockerlin666.gitee.com","root":"/","scheme":"Muse","version":"8.0.0-rc.5","exturl":false,"sidebar":{"position":"left","display":"always","padding":18,"offset":12},"copycode":false,"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":"changyan","storage":true,"lazyload":false,"nav":null,"activeClass":"changyan"},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"fadeInDown","post_body":"fadeInDown","coll_header":"fadeInLeft","sidebar":"fadeInUp"}},"prism":false};
  </script>

  <meta name="description" content="前言&amp;emsp;&amp;#8195;一直想建立一个方便更新的博客系统，经过长时间折腾（主要是水平有限O(∩_∩)O），找到了hexo结合next主题，自认为门槛很低，适合快速搭建自己的博客，本文就是我搭建博客的全过程，文章大量参考大神的博客和官方教程，主要参考资料：">
<meta property="og:type" content="article">
<meta property="og:title" content="使用hexo结合next搭建自己的博客">
<meta property="og:url" content="http://dockerlin666.gitee.com/2020/08/05/hexo-next/index.html">
<meta property="og:site_name" content="阳光灿烂的日志">
<meta property="og:description" content="前言&amp;emsp;&amp;#8195;一直想建立一个方便更新的博客系统，经过长时间折腾（主要是水平有限O(∩_∩)O），找到了hexo结合next主题，自认为门槛很低，适合快速搭建自己的博客，本文就是我搭建博客的全过程，文章大量参考大神的博客和官方教程，主要参考资料：">
<meta property="og:locale" content="zh_CN">
<meta property="article:published_time" content="2020-08-05T10:32:41.000Z">
<meta property="article:modified_time" content="2020-08-13T11:04:50.021Z">
<meta property="article:author" content="刀客林">
<meta property="article:tag" content="hexo">
<meta property="article:tag" content="next">
<meta property="article:tag" content="blog">
<meta name="twitter:card" content="summary">

<link rel="canonical" href="http://dockerlin666.gitee.com/2020/08/05/hexo-next/">


<script class="page-configurations">
  // https://hexo.io/docs/variables.html
  CONFIG.page = {
    sidebar: "",
    isHome : false,
    isPost : true,
    lang   : 'zh-CN'
  };
</script>

  <title>使用hexo结合next搭建自己的博客 | 阳光灿烂的日志</title>
  


  <script>
    var _hmt = _hmt || [];
    (function() {
      var hm = document.createElement("script");
      hm.src = "https://hm.baidu.com/hm.js?f59280177ba9fcb78a3c938de71308e3";
      var s = document.getElementsByTagName("script")[0];
      s.parentNode.insertBefore(hm, s);
    })();
  </script>




  <noscript>
  <style>
  body { margin-top: 2rem; }

  .use-motion .menu-item,
  .use-motion .sidebar,
  .use-motion .post-block,
  .use-motion .pagination,
  .use-motion .comments,
  .use-motion .post-header,
  .use-motion .post-body,
  .use-motion .collection-header {
    visibility: visible;
  }

  .use-motion .header,
  .use-motion .site-brand-container .toggle,
  .use-motion .footer { opacity: initial; }

  .use-motion .site-title,
  .use-motion .site-subtitle,
  .use-motion .custom-logo-image {
    opacity: initial;
    top: initial;
  }

  .use-motion .logo-line {
    transform: scaleX(1);
  }

  .search-pop-overlay, .sidebar-nav { display: none; }
  .sidebar-panel { display: block; }
  </style>
</noscript>

</head>

<body itemscope itemtype="http://schema.org/WebPage">
  <div class="container use-motion">
    <div class="headband"></div>

    <main class="main">
      <header class="header" itemscope itemtype="http://schema.org/WPHeader">
        <div class="header-inner"><div class="site-brand-container">
  <div class="site-nav-toggle">
    <div class="toggle" aria-label="切换导航栏">
        <span class="toggle-line"></span>
        <span class="toggle-line"></span>
        <span class="toggle-line"></span>
    </div>
  </div>

  <div class="site-meta">
      <img class="custom-logo-image" src="/uploads/logo400.png" alt="阳光灿烂的日志">

    <a href="/" class="brand" rel="start">
      <i class="logo-line"></i>
      <h1 class="site-title">阳光灿烂的日志</h1>
      <i class="logo-line"></i>
    </a>
      <p class="site-subtitle" itemprop="description">oh,my god</p>
  </div>

  <div class="site-nav-right">
    <div class="toggle popup-trigger">
    </div>
  </div>
</div>



<nav class="site-nav">
  <ul id="menu" class="main-menu menu">
        <li class="menu-item menu-item-home">

    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>

  </li>
        <li class="menu-item menu-item-about">

    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>

  </li>
        <li class="menu-item menu-item-tags">

    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>

  </li>
        <li class="menu-item menu-item-categories">

    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>

  </li>
        <li class="menu-item menu-item-archives">

    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>

  </li>
        <li class="menu-item menu-item-commonweal">

    <a href="/404/" rel="section"><i class="fa fa-heartbeat fa-fw"></i>公益 404</a>

  </li>
  </ul>
</nav>




</div>
          
  
  <div class="toggle sidebar-toggle">
    <span class="toggle-line"></span>
    <span class="toggle-line"></span>
    <span class="toggle-line"></span>
  </div>

  <aside class="sidebar">

    <div class="sidebar-inner sidebar-nav-active sidebar-toc-active">
      <ul class="sidebar-nav">
        <li class="sidebar-nav-toc">
          文章目录
        </li>
        <li class="sidebar-nav-overview">
          站点概览
        </li>
      </ul>

      <!--noindex-->
      <section class="post-toc-wrap sidebar-panel">
          <div class="post-toc animated"><ol class="nav"><li class="nav-item nav-level-2"><a class="nav-link" href="#%E5%89%8D%E8%A8%80"><span class="nav-number">1.</span> <span class="nav-text">前言</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E5%87%86%E5%A4%87%E5%B7%A5%E4%BD%9C"><span class="nav-number">2.</span> <span class="nav-text">准备工作</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E5%8D%9A%E5%AE%A2%E6%90%AD%E5%BB%BA"><span class="nav-number">3.</span> <span class="nav-text">博客搭建</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#%E5%AE%89%E8%A3%85hexo"><span class="nav-number">3.1.</span> <span class="nav-text">安装hexo</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E9%85%8D%E7%BD%AEhexo%E5%92%8Cnext"><span class="nav-number">3.2.</span> <span class="nav-text">配置hexo和next</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E4%BF%AE%E6%94%B9%E9%85%8D%E7%BD%AE%E6%96%87%E4%BB%B6"><span class="nav-number">3.3.</span> <span class="nav-text">修改配置文件</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E7%BC%96%E5%86%99%E5%8D%9A%E5%AE%A2%E6%96%87%E7%AB%A0"><span class="nav-number">3.4.</span> <span class="nav-text">编写博客文章</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E8%BF%90%E8%A1%8Chexo%E8%B0%83%E8%AF%95%E6%9C%8D%E5%8A%A1%EF%BC%8C%E6%9F%A5%E7%9C%8B%E6%95%88%E6%9E%9C"><span class="nav-number">3.5.</span> <span class="nav-text">运行hexo调试服务，查看效果</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E9%83%A8%E7%BD%B2%E5%88%B0%E7%A0%81%E4%BA%91"><span class="nav-number">3.6.</span> <span class="nav-text">部署到码云</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E9%AB%98%E7%BA%A7%E9%85%8D%E7%BD%AE"><span class="nav-number">4.</span> <span class="nav-text">高级配置</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#%E9%85%8D%E7%BD%AE%E4%B8%AA%E6%80%A7%E5%8C%96LOGO"><span class="nav-number">4.1.</span> <span class="nav-text">配置个性化LOGO</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E9%85%8D%E7%BD%AE%E5%A4%87%E6%A1%88%E4%BF%A1%E6%81%AF"><span class="nav-number">4.2.</span> <span class="nav-text">配置备案信息</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E9%85%8D%E7%BD%AEsidebar%E4%B8%80%E7%9B%B4%E6%89%93%E5%BC%80"><span class="nav-number">4.3.</span> <span class="nav-text">配置sidebar一直打开</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E9%85%8D%E7%BD%AE%E5%8D%9A%E4%B8%BB%E5%A4%B4%E5%83%8F"><span class="nav-number">4.4.</span> <span class="nav-text">配置博主头像</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E9%85%8D%E7%BD%AE%E4%B8%BB%E9%A1%B5%E6%96%87%E7%AB%A0%E6%98%BE%E7%A4%BA%E2%80%9C%E9%98%85%E8%AF%BB%E5%85%A8%E6%96%87%E2%80%9D"><span class="nav-number">4.5.</span> <span class="nav-text">配置主页文章显示“阅读全文”</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E5%8D%9A%E5%AE%A2%E6%96%87%E7%AB%A0%E5%AD%97%E6%95%B0%E7%BB%9F%E8%AE%A1"><span class="nav-number">4.6.</span> <span class="nav-text">博客文章字数统计</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E5%A2%9E%E5%8A%A0%E8%87%AA%E5%AE%9A%E4%B9%89%E9%A1%B5%E9%9D%A2"><span class="nav-number">4.7.</span> <span class="nav-text">增加自定义页面</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E9%85%8D%E7%BD%AE%E7%99%BE%E5%BA%A6%E6%8E%A8%E9%80%81"><span class="nav-number">4.8.</span> <span class="nav-text">配置百度推送</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#tag-plugins"><span class="nav-number">4.9.</span> <span class="nav-text">tag plugins</span></a></li></ol></li></ol></div>
      </section>
      <!--/noindex-->

      <section class="site-overview-wrap sidebar-panel">
        <div class="site-author animated" itemprop="author" itemscope itemtype="http://schema.org/Person">
    <img class="site-author-image" itemprop="image" alt="刀客林"
      src="/uploads/avatar.jpg">
  <p class="site-author-name" itemprop="name">刀客林</p>
  <div class="site-description" itemprop="description">记录无聊的生活，要不然都忘记了！</div>
</div>
<div class="site-state-wrap animated">
  <nav class="site-state">
      <div class="site-state-item site-state-posts">
          <a href="/archives/">
        
          <span class="site-state-item-count">6</span>
          <span class="site-state-item-name">日志</span>
        </a>
      </div>
      <div class="site-state-item site-state-categories">
            <a href="/categories/">
          
        <span class="site-state-item-count">4</span>
        <span class="site-state-item-name">分类</span></a>
      </div>
      <div class="site-state-item site-state-tags">
            <a href="/tags/">
          
        <span class="site-state-item-count">11</span>
        <span class="site-state-item-name">标签</span></a>
      </div>
  </nav>
</div>



      </section>
    </div>
  </aside>
  <div id="sidebar-dimmer"></div>


      </header>

      
  <div class="back-to-top">
    <i class="fa fa-arrow-up"></i>
    <span>0%</span>
  </div>

<noscript>
  <div id="noscript-warning">Theme NexT works best with JavaScript enabled</div>
</noscript>


      <div class="main-inner">
        

        <div class="content post posts-expand">
          

    
  
  
  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="zh-CN">
    <link itemprop="mainEntityOfPage" href="http://dockerlin666.gitee.com/2020/08/05/hexo-next/">

    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
      <meta itemprop="image" content="/uploads/avatar.jpg">
      <meta itemprop="name" content="刀客林">
      <meta itemprop="description" content="记录无聊的生活，要不然都忘记了！">
    </span>

    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
      <meta itemprop="name" content="阳光灿烂的日志">
    </span>

    
      <header class="post-header">
        <h1 class="post-title" itemprop="name headline">
          使用hexo结合next搭建自己的博客
        </h1>

        <div class="post-meta">
            <span class="post-meta-item">
              <span class="post-meta-item-icon">
                <i class="far fa-calendar"></i>
              </span>
              <span class="post-meta-item-text">发表于</span>

              <time title="创建时间：2020-08-05 18:32:41" itemprop="dateCreated datePublished" datetime="2020-08-05T18:32:41+08:00">2020-08-05</time>
            </span>
              <span class="post-meta-item">
                <span class="post-meta-item-icon">
                  <i class="far fa-calendar-check"></i>
                </span>
                <span class="post-meta-item-text">更新于</span>
                <time title="修改时间：2020-08-13 19:04:50" itemprop="dateModified" datetime="2020-08-13T19:04:50+08:00">2020-08-13</time>
              </span>
            <span class="post-meta-item">
              <span class="post-meta-item-icon">
                <i class="far fa-folder"></i>
              </span>
              <span class="post-meta-item-text">分类于</span>
                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
                  <a href="/categories/%E5%AD%A6%E4%B9%A0/" itemprop="url" rel="index"><span itemprop="name">学习</span></a>
                </span>
                  ，
                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
                  <a href="/categories/%E5%AD%A6%E4%B9%A0/hexo/" itemprop="url" rel="index"><span itemprop="name">hexo</span></a>
                </span>
            </span>

          
  
  <span class="post-meta-item">
    
      <span class="post-meta-item-icon">
        <i class="far fa-comment"></i>
      </span>
      <span class="post-meta-item-text">Changyan：</span>
    
    
      <a title="changyan" href="/2020/08/05/hexo-next/#SOHUCS" itemprop="discussionUrl">
        <span id="changyan_count_unit" class="post-comments-count hc-comment-count" data-xid="2020/08/05/hexo-next/" itemprop="commentCount"></span>
      </a>
    
  </span>
  
  <br>
            <span class="post-meta-item" title="本文字数">
              <span class="post-meta-item-icon">
                <i class="far fa-file-word"></i>
              </span>
                <span class="post-meta-item-text">本文字数：</span>
              <span>5.4k</span>
            </span>
            <span class="post-meta-item" title="阅读时长">
              <span class="post-meta-item-icon">
                <i class="far fa-clock"></i>
              </span>
                <span class="post-meta-item-text">阅读时长 &asymp;</span>
              <span>5 分钟</span>
            </span>

        </div>
      </header>

    
    
    
    <div class="post-body" itemprop="articleBody">
        <h2 id="前言"><a href="#前言" class="headerlink" title="前言"></a>前言</h2><p>&emsp;&#8195;一直想建立一个方便更新的博客系统，经过长时间折腾（主要是水平有限O(∩_∩)O），找到了hexo结合next主题，自认为门槛很低，适合快速搭建自己的博客，本文就是我搭建博客的全过程，文章大量参考大神的博客和官方教程，主要参考资料：</p>
<a id="more"></a>

<ul>
<li><a target="_blank" rel="noopener" href="https://hexo.io/docs" title="hexo中文手册">hexo手册</a></li>
<li><a target="_blank" rel="noopener" href="https://www.cnblogs.com/yyhh/p/11058985.html" title="hexo建立主题">hexo建立主题</a></li>
<li><a target="_blank" rel="noopener" href="https://www.imczw.com/post/tech/next_data_file.html" title="next自定义">next自定义</a></li>
<li><a target="_blank" rel="noopener" href="https://theme-next.js.org/docs/theme-settings/custom-files.html" title="next官方手册">next官方手册</a></li>
<li><a target="_blank" rel="noopener" href="https://hexo.io/news/2020/07/29/hexo-5-released/" title="hexo5.0.0">hexo5.0.0</a></li>
<li><a target="_blank" rel="noopener" href="https://hexo.bootcss.com/plugins/" title="hexo plugin">hexo插件</a></li>
<li><a target="_blank" rel="noopener" href="https://fontawesome.dashgame.com/" title="font awesome图标库">font awesome</a></li>
<li><a target="_blank" rel="noopener" href="http://node-swig.github.io/swig-templates/docs/" title="swig模板">swig模板手册</a></li>
<li><a target="_blank" rel="noopener" href="http://theme-next.iissnan.com/" title="next主题手册">next主题手册</a></li>
<li><a target="_blank" rel="noopener" href="https://blog.csdn.net/colton_null/article/details/97622079" title="next主题实践">next主题实践</a></li>
<li><a target="_blank" rel="noopener" href="https://theme-next.js.org/" title="next主题官方博客">next主题官方博客</a></li>
<li><a target="_blank" rel="noopener" href="https://blog.csdn.net/weixin_46261309/article/details/105932235" title="Nunjucks模板语法">Nunjucks模板语法</a></li>
</ul>
<p>&emsp;&#8195;实践过程中，使用了hexo4和hexo5，next5，next7，next8，为了与时俱进，以下内容都是基于hexo5和next8搭建</p>
<p>next版本地址</p>
<ul>
<li><a target="_blank" rel="noopener" href="https://github.com/iissnan/hexo-theme-next">https://github.com/iissnan/hexo-theme-next</a>     5.0 已不再维护</li>
<li><a target="_blank" rel="noopener" href="https://github.com/theme-next/hexo-theme-next">https://github.com/theme-next/hexo-theme-next</a>  6.0-7.0</li>
<li><a target="_blank" rel="noopener" href="https://github.com/next-theme/hexo-theme-next">https://github.com/next-theme/hexo-theme-next</a>  8.0</li>
</ul>
<h2 id="准备工作"><a href="#准备工作" class="headerlink" title="准备工作"></a>准备工作</h2><ul>
<li><p>系统环境</p>
<ul>
<li>Ubuntu 18.04.1 LTS</li>
</ul>
</li>
<li><p>必要软件</p>
<ul>
<li>nodejs v12.18.3</li>
<li>git version 2.17.1</li>
</ul>
</li>
<li><p>仓库准备</p>
<ul>
<li><a target="_blank" rel="noopener" href="https://gitee.com/dockerlin666/dockerlin666.git">https://gitee.com/dockerlin666/dockerlin666.git</a>         blog发布仓库</li>
<li><a target="_blank" rel="noopener" href="https://gitee.com/dockerlin666/blog-hexo-new-next">https://gitee.com/dockerlin666/blog-hexo-new-next</a>       源码仓库</li>
</ul>
</li>
</ul>
<h2 id="博客搭建"><a href="#博客搭建" class="headerlink" title="博客搭建"></a>博客搭建</h2><p>从这里开始搭建博客，配置博客，其实改动很少。</p>
<h3 id="安装hexo"><a href="#安装hexo" class="headerlink" title="安装hexo"></a>安装hexo</h3><p>为了简便起见，这里列出所有必要的安装项</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line">npm install -g hexo-cli                                                         安装hexo环境 好像npm install -g hexo 也可以</span><br><span class="line">hexo init blog-hexo-new-next                                                    初始化blog目录</span><br><span class="line">cd blog-hexo-new-next                                                           进入博客目录</span><br><span class="line">git init                                                                        初始化git环境</span><br><span class="line">git remote add origin https:&#x2F;&#x2F;gitee.com&#x2F;dockerlin666&#x2F;blog-hexo-next.git         添加远程git源码仓库</span><br><span class="line">git pull origin master                                                          拉取远程仓库，应该是空仓库</span><br><span class="line">git add -A                                                                      添加初始化后的项目文件</span><br><span class="line">git commit -m &#39;init hexo blog project&#39;                                          提交到代码到本地</span><br><span class="line">git push origin master                                                          提交代码到远程仓库（以后每次修改后，可以反复add commit push到远程仓库）</span><br><span class="line">git submodule add https:&#x2F;&#x2F;github.com&#x2F;next-theme&#x2F;hexo-theme-next themes&#x2F;next     next8.0主题到主题目录下（所有主题都放在themes目录下）</span><br><span class="line">npm install hexo-deployer-git --save                                            安装hexo git插件，用于提交博客到发布仓库</span><br></pre></td></tr></table></figure>

<h3 id="配置hexo和next"><a href="#配置hexo和next" class="headerlink" title="配置hexo和next"></a>配置hexo和next</h3><p>这里不做过多说明，只记录配置过程，具体含义可以查看hexo和next手册</p>
<ul>
<li>建立 hexo categories（分类） 和 tag（标签）</li>
</ul>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">hexo new page tags</span><br><span class="line">hexo new page categories</span><br></pre></td></tr></table></figure>

<p>可以看到建立了两个文件，按如下方式修改文件</p>
<ul>
<li>blog-hexo-new-next/source/categories/index.md<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">---</span><br><span class="line">title: 分类</span><br><span class="line">date: 2020-08-06 10:22:18</span><br><span class="line">type: &quot;categories&quot;</span><br><span class="line">---</span><br></pre></td></tr></table></figure></li>
<li>blog-hexo-new-next/source/tags/index.md<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">---</span><br><span class="line">title: 标签</span><br><span class="line">date: 2020-08-06 10:21:36</span><br><span class="line">type: &quot;tags&quot;</span><br><span class="line">---</span><br></pre></td></tr></table></figure>

</li>
</ul>
<h3 id="修改配置文件"><a href="#修改配置文件" class="headerlink" title="修改配置文件"></a>修改配置文件</h3><p>有两个配置文件很重要<br>hexo配置文件，blog-hexo-new-next/_config.yml<br>next配置文件, blog-hexo-new-next/themes/next/_config.yml<br>在这里我们用到5.0.0特有的功能，建立下面的文件<br>blog-hexo-new-next/_config.next.yml<br>这样做的好处是当next发布新版本时，我们可以直接git pull origin master下载最新版本，不用担心我们的配置文件有冲突<br>使用下面命令</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">cp themes&#x2F;next&#x2F;_config.yml  _config.next.yml </span><br></pre></td></tr></table></figure>

<p>下面修改hexo配置文件如下：</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><span class="line">title: &#39;阳光灿烂的日志&#39;</span><br><span class="line">subtitle: &#39;oh,my god&#39;</span><br><span class="line">description: &#39;记录无聊的生活，要不然都忘记了！&#39;</span><br><span class="line">keywords: &#39;blog, DockerLin, linux, docker, php, nodejs, vue, mysql, redis&#39;</span><br><span class="line">author: 刀客林</span><br><span class="line">language: zh-CN</span><br><span class="line">timezone: &#39;Asia&#x2F;ShangHai&#39;</span><br><span class="line">...... </span><br><span class="line">theme: next</span><br><span class="line">deploy:</span><br><span class="line">  type: git</span><br><span class="line">  repo: https:&#x2F;&#x2F;gitee.com&#x2F;dockerlin666&#x2F;dockerlin666.git</span><br><span class="line">  branch: master</span><br></pre></td></tr></table></figure>

<p>其中 theme 配置成next<br>deploy章节是博客发布地址，我这里使用的码云的page发布博客。</p>
<p>下面修改next配置文件，注意是blog-hexo-new-next/_config.next.yml</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line">menu:</span><br><span class="line">  home: &#x2F; || fa fa-home</span><br><span class="line">  #about: &#x2F;about&#x2F; || fa fa-user</span><br><span class="line">  tags: &#x2F;tags&#x2F; || fa fa-tags</span><br><span class="line">  categories: &#x2F;categories&#x2F; || fa fa-th</span><br><span class="line">  archives: &#x2F;archives&#x2F; || fa fa-archive</span><br><span class="line">  #schedule: &#x2F;schedule&#x2F; || fa fa-calendar</span><br><span class="line">  #sitemap: &#x2F;sitemap.xml || fa fa-sitemap</span><br><span class="line">  #commonweal: &#x2F;404&#x2F; || fa fa-heartbeat</span><br></pre></td></tr></table></figure>

<p>打开 首页、标签、分类、归档菜单</p>
<h3 id="编写博客文章"><a href="#编写博客文章" class="headerlink" title="编写博客文章"></a>编写博客文章</h3><ul>
<li>新建文章命令</li>
</ul>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">hexo new hexo-next</span><br></pre></td></tr></table></figure>

<p>执行后会发现增加了blog-hexo-new-next/source/_posts/hexo-next.md<br>如果建错了直接删除文件，重新执行新建文章命令</p>
<ul>
<li>编写文章标题、分类、标签</li>
</ul>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line">---</span><br><span class="line">title: 使用hexo结合next搭建自己的博客</span><br><span class="line">date: 2020-08-05 18:32:41</span><br><span class="line">categories:</span><br><span class="line">- [学习, hexo]</span><br><span class="line">tags:</span><br><span class="line">- hexo</span><br><span class="line">- next</span><br><span class="line">- blog</span><br><span class="line">---</span><br></pre></td></tr></table></figure>

<p>下面就是用markdown语法写文章了</p>
<h3 id="运行hexo调试服务，查看效果"><a href="#运行hexo调试服务，查看效果" class="headerlink" title="运行hexo调试服务，查看效果"></a>运行hexo调试服务，查看效果</h3><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">hexo s --debug</span><br></pre></td></tr></table></figure>

<p>看到 07:26:10.241 INFO  Hexo is running at <a target="_blank" rel="noopener" href="http://localhost:4000">http://localhost:4000</a> . Press Ctrl+C to stop. 表示服务器运行正常，在浏览器里查看效果</p>
<h3 id="部署到码云"><a href="#部署到码云" class="headerlink" title="部署到码云"></a>部署到码云</h3><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">hexo clean</span><br><span class="line">hexo generate</span><br><span class="line">hexo deploy</span><br></pre></td></tr></table></figure>

<p>输入gitee的用户名和密码提交成功，登录gitee网站进入dockerlin666/dockerlin666仓库，点击服务》Gitee Pages 服务 》更新<br>好了，现在可以看看 <a target="_blank" rel="noopener" href="http://dockerlin666.gitee.io">http://dockerlin666.gitee.io</a> 上的效果了</p>
<h2 id="高级配置"><a href="#高级配置" class="headerlink" title="高级配置"></a>高级配置</h2><p>上面介绍了如何快速搭建一个博客系统，基本上满足了基本需求，下面的内容都是锦上添花，有兴趣的可以配置一下。<br>以下没有特别说明，都是修改文件 blog-hexo-new-next/_config.next.yml</p>
<h3 id="配置个性化LOGO"><a href="#配置个性化LOGO" class="headerlink" title="配置个性化LOGO"></a>配置个性化LOGO</h3><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">custom_logo: &#x2F;uploads&#x2F;logo400.png</span><br></pre></td></tr></table></figure>

<h3 id="配置备案信息"><a href="#配置备案信息" class="headerlink" title="配置备案信息"></a>配置备案信息</h3><p>如果icp要求备案的化，可以配置备案信息，这里只做演示</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line">beian:</span><br><span class="line">    enable: true</span><br><span class="line">    icp: 京ICP备 测试1234567890号-1</span><br><span class="line">    gongan_id: 测试1234567890</span><br><span class="line">    gongan_num: 京公网安备 测试1234567890号</span><br><span class="line">    gongan_icon_url: http:&#x2F;&#x2F;www.beian.gov.cn&#x2F;img&#x2F;new&#x2F;gongan.png</span><br><span class="line"></span><br></pre></td></tr></table></figure>

<h3 id="配置sidebar一直打开"><a href="#配置sidebar一直打开" class="headerlink" title="配置sidebar一直打开"></a>配置sidebar一直打开</h3><p>找到sidebar章节</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">display: always</span><br></pre></td></tr></table></figure>

<h3 id="配置博主头像"><a href="#配置博主头像" class="headerlink" title="配置博主头像"></a>配置博主头像</h3><p>把自己的头像拷贝到blog-hexo-new-next/source/uploads/avatar.jpg</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">avatar:</span><br><span class="line">  url: &#x2F;uploads&#x2F;avatar.jpg</span><br><span class="line"></span><br></pre></td></tr></table></figure>

<h3 id="配置主页文章显示“阅读全文”"><a href="#配置主页文章显示“阅读全文”" class="headerlink" title="配置主页文章显示“阅读全文”"></a>配置主页文章显示“阅读全文”</h3><p>有两种方式,这里只介绍hexo建议采用的方式<br>在每篇md文章合适位置加入 </p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">&lt;!-- more --&gt;</span><br></pre></td></tr></table></figure>

<h3 id="博客文章字数统计"><a href="#博客文章字数统计" class="headerlink" title="博客文章字数统计"></a>博客文章字数统计</h3><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">npm install hexo-word-counter</span><br><span class="line">hexo clean</span><br></pre></td></tr></table></figure>
<p>修改主题配置文件</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">symbols_count_time:</span><br><span class="line">  separated_meta: true</span><br><span class="line">  item_text_post: true</span><br><span class="line">  item_text_total: true</span><br></pre></td></tr></table></figure>

<h3 id="增加自定义页面"><a href="#增加自定义页面" class="headerlink" title="增加自定义页面"></a>增加自定义页面</h3><p>这里以增加“关于”页面为例</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">hexo new page about</span><br></pre></td></tr></table></figure>

<p>修改blog-hexo-new-next/source/about/index.md文件</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">---</span><br><span class="line">title: 关于我</span><br><span class="line">date: 2020-08-07 15:43:14</span><br><span class="line">---</span><br></pre></td></tr></table></figure>

<p>编辑主题配置文件，取消about前面的注释，如果没有也可以自己添加</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">menu:</span><br><span class="line">  about: &#x2F;about&#x2F; || fa fa-user</span><br></pre></td></tr></table></figure>

<p>使用md写一篇自己的介绍</p>
<h3 id="配置百度推送"><a href="#配置百度推送" class="headerlink" title="配置百度推送"></a>配置百度推送</h3><p>在 <a target="_blank" rel="noopener" href="https://ziyuan.baidu.com/property/index">https://ziyuan.baidu.com/property/index</a> 上面添加站点<br>选择验证模式HTML Tag</p>
<p>修改主题配置文件</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">baidu_site_verification: xxxxxx(百度页面上面拷贝下来)</span><br><span class="line">baidu_push: true</span><br></pre></td></tr></table></figure>

<p>部署到gitee，更新后，再在百度点击验证，如果不成功，可以看一下网页源代码是否存在</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">&lt;meta name&#x3D;&quot;baidu-site-verification&quot; content&#x3D;&quot;xxxxxx&quot;&gt;</span><br></pre></td></tr></table></figure>

<h3 id="tag-plugins"><a href="#tag-plugins" class="headerlink" title="tag plugins"></a>tag plugins</h3><p>自定义标签，只在next下起作用</p>
<div class="note info"><p>####### note标签使用手册<br><strong>note标签使用手册</strong> to <a target="_blank" rel="noopener" href="https://theme-next.js.org/docs/tag-plugins/note.html">手册</a></p>
</div>

<p>正常文本 <mark class="label default">缺省label</mark> <mark class="label primary">带样式的label</mark> <a target="_blank" rel="noopener" href="https://theme-next.js.org/docs/tag-plugins/label.html">手册</a></p>
<div><a class="btn" href="#"><i class="fa fa-home fa-5x"></i></a><a class="btn" href="#"><i class="fa fa-home fa-5x"></i></a><a class="btn" target="_blank" rel="noopener" href="https://theme-next.js.org/docs/tag-plugins/button.html" title="tag button 手册"><i class="fa fa-home fa-lg"></i>手册</a></div>

<div class="tabs" id="demotab"><ul class="nav-tabs"><li class="tab active"><a href="#demotab-1"><i class="fa fa-bell"></i>tab演示</a></li><li class="tab"><a href="#demotab-2"><i class="fa fa-file"></i>显示pdf</a></li></ul><div class="tab-content"><div class="tab-pane active" id="demotab-1"><p><a target="_blank" rel="noopener" href="https://theme-next.js.org/docs/tag-plugins/tabs.html">tabs手册</a></p></div><div class="tab-pane" id="demotab-2"><p>Any content (support inline tags too). pdf<br><a target="_blank" rel="noopener" href="https://theme-next.js.org/docs/tag-plugins/tabs.html">pdf手册</a></p>
<div class="pdfobject-container" data-target="/uploads/license.pdf" data-height="300px"></div></div></div></div>

<p><a target="_blank" rel="noopener" href="https://theme-next.js.org/docs/tag-plugins/mermaid.html">Mermaid手册</a><br><a target="_blank" rel="noopener" href="https://mermaid-js.github.io/mermaid/#/examples">Mermaid官网例子</a></p>
<p><strong><em>饼图</em></strong></p>
<pre class="mermaid" style="text-align: center;">
pie title 最好的编程语言
&quot;php&quot; : 90
&quot;其他语言&quot; : 10
</pre>

<p><strong><em>时序图</em></strong></p>
<pre class="mermaid" style="text-align: center;">
sequenceDiagram
黄蓉 -&gt;&gt; 郭靖: 傻姑，我喜欢你^@^
郭靖 --&gt;&gt; 欧阳克: 咳咳，你觉得怎么样?
郭靖 --&gt;&gt; 黄蓉: 我能不能问问我师父先。
黄蓉 -&gt;&gt; 郭靖: 问个屁
Note right of 郭靖: 郭靖想了&lt;br&#x2F;&gt;很长很长&lt;br&#x2F;&gt;时间。
黄蓉 -x 郭靖: 问个屁
欧阳克 -&gt;&gt; 黄蓉: 能不能考虑我先
黄蓉 --&gt;&gt; 黄蓉: 激烈的思想斗争
Note left of 黄蓉: 欧阳克&lt;br&#x2F;&gt;长得挺帅的。
黄蓉 -&gt;&gt; 欧阳克: 蛇岛有别墅吗
</pre>

<p><strong><em>流程图</em></strong></p>
<pre class="mermaid" style="text-align: center;">
graph TD
start[&#x2F;开始\] --&gt;|发起请求| server[API服务器]
server --&gt; C{判断是哪个服务器}
C --&gt;|One| D([服务器 1])
C --&gt;|Two| E(服务器 2)
D &lt;--&gt; F[(数据库)]
D --&gt; stop[\结束&#x2F;]
E --&gt; stop
</pre>

<p><strong><em>状态图</em></strong></p>
<pre class="mermaid" style="text-align: center;">
stateDiagram
[*] --&gt; Still
Still --&gt; [*]
Still --&gt; Moving
Moving --&gt; Still
Moving --&gt; Crash
Crash --&gt; [*]
</pre>

<p><strong><em>甘特图</em></strong></p>
<pre class="mermaid" style="text-align: center;">
gantt
section 工作安排
已完成        :done,    des1, 2020-01-01,2020-08-08
项目1       :active,  des2, 2020-05-01,2020-08-13
单元1   :         des3, 2020-06-01,2020-08-13
单元2   :         des4, 2020-07-01,2020-08-13
</pre>

<p><strong><em>时间轴图</em></strong></p>
<pre class="mermaid" style="text-align: center;">
journey
title 工作日
section 上班
  喝茶: 5: 我
  上楼: 3: 我
  工作: 1: 我, 猫
section 回家
  下楼: 5: 我
  坐下: 3: 我
</pre>



    </div>

    
    
    

      <footer class="post-footer">
          <div class="post-tags">
              <a href="/tags/hexo/" rel="tag"><i class="fa fa-tag"></i> hexo</a>
              <a href="/tags/next/" rel="tag"><i class="fa fa-tag"></i> next</a>
              <a href="/tags/blog/" rel="tag"><i class="fa fa-tag"></i> blog</a>
          </div>

        


        
    <div class="post-nav">
      <div class="post-nav-item"></div>
      <div class="post-nav-item">
    <a href="/2020/08/05/markdown/" rel="next" title="markdown语法介绍">
      markdown语法介绍 <i class="fa fa-chevron-right"></i>
    </a></div>
    </div>
      </footer>
    
  </article>
  
  
  



        </div>
        
    
  <div class="comments">
    <div id="SOHUCS"></div>
  </div>
  

<script>
  window.addEventListener('tabs:register', () => {
    let { activeClass } = CONFIG.comments;
    if (CONFIG.comments.storage) {
      activeClass = localStorage.getItem('comments_active') || activeClass;
    }
    if (activeClass) {
      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
      if (activeTab) {
        activeTab.click();
      }
    }
  });
  if (CONFIG.comments.storage) {
    window.addEventListener('tabs:click', event => {
      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
      let commentClass = event.target.classList[1];
      localStorage.setItem('comments_active', commentClass);
    });
  }
</script>

      </div>
    </main>

    <footer class="footer">
      <div class="footer-inner">
        

        
  <div class="beian"><a href="http://www.beian.miit.gov.cn/" rel="noopener" target="_blank">京ICP备 测试1234567890号-1 </a>
      <img src="http://www.beian.gov.cn/img/new/gongan.png" style="display: inline-block;"><a href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=%E6%B5%8B%E8%AF%951234567890" rel="noopener" target="_blank">京公网安备 测试1234567890号 </a>
  </div>

<div class="copyright">
  
  &copy; 
  <span itemprop="copyrightYear">2020</span>
  <span class="with-love">
    <i class="fa fa-heart"></i>
  </span>
  <span class="author" itemprop="copyrightHolder">刀客林</span>
    <span class="post-meta-divider">|</span>
    <span class="post-meta-item-icon">
      <i class="fa fa-chart-area"></i>
    </span>
      <span class="post-meta-item-text">站点总字数：</span>
    <span title="站点总字数">41k</span>
    <span class="post-meta-divider">|</span>
    <span class="post-meta-item-icon">
      <i class="fa fa-coffee"></i>
    </span>
      <span class="post-meta-item-text">站点阅读时长 &asymp;</span>
    <span title="站点阅读时长">37 分钟</span>
</div>
  <div class="powered-by">由 <a href="https://hexo.io/" class="theme-link" rel="noopener" target="_blank">Hexo</a> & <a href="https://theme-next.js.org/muse/" class="theme-link" rel="noopener" target="_blank">NexT.Muse</a> 强力驱动
  </div>

        








      </div>
    </footer>
  </div>

  
  <script src="//cdn.jsdelivr.net/npm/animejs@3.2.0/lib/anime.min.js"></script>

<script src="/js/utils.js"></script>

<script src="/js/motion.js"></script>


<script src="/js/schemes/muse.js"></script>


<script src="/js/next-boot.js"></script>


  
  <script>
    (function(){
      var bp = document.createElement('script');
      var curProtocol = window.location.protocol.split(':')[0];
      bp.src = (curProtocol === 'https') ? 'https://zz.bdstatic.com/linksubmit/push.js' : 'http://push.zhanzhang.baidu.com/push.js';
      var s = document.getElementsByTagName("script")[0];
      s.parentNode.insertBefore(bp, s);
    })();
  </script>











<script>
document.querySelectorAll('.pdfobject-container').forEach(element => {
  let url = element.dataset.target;
  let pdfOpenParams = {
    navpanes : 0,
    toolbar  : 0,
    statusbar: 0,
    pagemode : 'thumbs',
    view     : 'FitH'
  };
  let pdfOpenFragment = '#' + Object.entries(pdfOpenParams).map(([key, value]) => `${key}=${encodeURIComponent(value)}`).join('&');
  let fullURL = `/lib/pdf/web/viewer.html?file=${encodeURIComponent(url)}${pdfOpenFragment}`;

  if (NexT.utils.supportsPDFs()) {
    element.innerHTML = `<embed class="pdfobject" src="${url + pdfOpenFragment}" type="application/pdf" style="height: ${element.dataset.height};">`;
  } else {
    element.innerHTML = `<iframe src="${fullURL}" style="height: ${element.dataset.height};" frameborder="0"></iframe>`;
  }
});
</script>


<script>
if (document.querySelectorAll('pre.mermaid').length) {
  NexT.utils.getScript('//cdn.jsdelivr.net/npm/mermaid@8.6.4/dist/mermaid.min.js', () => {
    mermaid.init({
      theme    : 'forest',
      logLevel : 3,
      flowchart: { curve     : 'linear' },
      gantt    : { axisFormat: '%m/%d/%Y' },
      sequence : { actorMargin: 50 }
    }, '.mermaid');
  }, window.mermaid);
}
</script>


  

  

  <script>
  NexT.utils.loadComments('#SOHUCS', () => {
    NexT.utils.getScript('https://changyan.sohu.com/upload/changyan.js', () => {
      window.changyan.api.config({
        appid: 'cyuYT0YXi',
        conf : '84caa3b92fd5f3996f4e117aad400242'
      });
    });
  });
  </script>
  <script src="https://assets.changyan.sohu.com/upload/plugins/plugins.count.js"></script>

</body>
</html>
